<template>
  <transition>
    <div class="app-grabsheet-list">
      <section class="app-main">

        <div class="app-main-content">
          <div class="app-fixed-top">
            <div class="app-header">
          <span class="type-show">抢单中心</span>
              <!--<mt-button class="btn-filter" type="danger">新增</mt-button>-->
              <mt-button class="btn-filter" type="danger" @click="handleFilter">筛选</mt-button>
            </div>
            <mt-navbar v-model="selected" class="tab-store">
              <mt-tab-item id="1"><span class="tab-item-content">待抢单<span class="count" v-if="resCount.storeWaitAllotCount!==0">{{resCount.storeWaitAllotCount}}</span></span></mt-tab-item>
              <mt-tab-item id="3"><span class="tab-item-content">已抢单<span class="count" v-if="resCount.storeProcessCount!==0">{{resCount.storeProcessCount}}</span></span></mt-tab-item>
              <mt-tab-item id="4"><span class="tab-item-content">已开单<span class="count" v-if="resCount.storeWaitTBCCount!==0">{{resCount.storeWaitTBCCount}}</span></span></mt-tab-item>

            </mt-navbar>
          </div>
          <!-- tab-container -->

          <div class="tab-body xunjia-list">
            <ul class="tab-list"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="10">
              <li class="item" v-for="item in enquiryList">
                <div class="item-header">
                  {{item.applyCustomName}}<template v-if="!item.applyCustomName">{{item.applyCustomTypeName}}</template>
                  <div class="item-sn">{{item.sn}}</div>
                  <span class="item-state ">{{item.storeAllotStatusDesc}}</span>
                </div>
                <div class="item-body">
                  <dl class="item-body-content" @click="handleDetails(item.demandId)">
                    <dd><span class="item-addon">客户说明：</span><template v-if="item.applyCustomDesc">{{item.applyCustomDesc}}</template></dd>
                    <dd><span class="item-addon">车牌号/自编号：</span>{{item.carNo}}<template v-if="item.carNo">/</template>{{item.selfNumber}}</dd>
                    <dd><span class="item-addon">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span>{{item.carModel}}</dd>
                  </dl>
                  <div><span class="item-addon"><span class="iconfont icon-didian1"></span>位&nbsp;&nbsp;置：</span>{{item.address}}</div>
                </div>
                <div class="item-footer" v-if="selected==1">
                <mt-button type="danger" @click="handleGrabsheet(item.demandId)">立即抢单</mt-button>
                <mt-button type="danger" @click="handleDetails(item.demandId)" style="background: #007EE5;color: #fff">工单详情</mt-button>
              </div>
                <div class="item-footer" v-else>
                  <mt-button type="danger" @click="handleDetails(item.demandId)" style="width: 100%">工单详情</mt-button>
                </div>
              </li>
            </ul>

            <div class="line-scale-pulse-out" v-show="loading">
              <div class="loader-item"></div>
              <div class="loader-item"></div>
              <div class="loader-item"></div>
              <div class="loader-item"></div>
              <div class="loader-item"></div>
            </div>
            <div class="module-none" v-if="showNone">
              <span class="iconfont icon-meiyoudingdan"></span>
              暂无相关数据
            </div>
            <!--<div class="load-finish-tips" v-if="loadTips">-->
            <!--已加载完成-->
            <!--</div>-->
          </div>

          <!--弹窗-列表筛选-->
          <mt-popup
            v-model="popupFilterShow"
            position="right" class="filter-popup">
            <ul class="filter-list">
              <li class="filter-item">
                <span class="addon">条件搜索</span>
              </li>
              <li class="filter-item filter-item-spe">
                <mt-field label="预约时间" placeholder="" v-model="search.sn"></mt-field>
              </li>
              <li class="filter-item filter-item-spe">
                <mt-field label="车牌号" placeholder="" v-model="search.carNo"></mt-field>
              </li>
              <li class="filter-item filter-item-spe">
                <mt-field label="服务内容" placeholder="" v-model="search.remark"></mt-field>
              </li>
            </ul>
            <div class="button-content">
              <div class="button-block-6">
                <mt-button type="default" @click="popupFilterShow=false">取消</mt-button>
              </div>
              <div class="button-block-6">
                <mt-button type="danger" @click="handleSure">确认</mt-button>
              </div>
            </div>
          </mt-popup>
          <!--弹窗-列表筛选-->
        </div>
      </section>
    </div>
  </transition>
</template>

<script>
  import { Navbar, TabItem,TabContainer, TabContainerItem,Button,Indicator,Toast,MessageBox} from 'mint-ui';

  //  Vue.component(Header.name, Header);
  export default {
    data () {
      return {
        selected:'',
        isAdmin:false,
        res:'',
        resCount:'',
        showNone:false,
        loading:false,
        loadTips:false,
        page:1,
        pageSize:10,
        orderByField:'',
        enquiryList:[],
        isNeed:false,
        popupFilterShow:false,
        search:{
          applyCustomName:'',
          carNo:'',
          remark:'',
          sn:'',
          incomplete:'',
        },
        isShow:true,
        optionsIsFinish:[
          {
            label:'无法完工',
            value:'1',
          }
        ],
        isFinish:[],
      }
    },

    /**进入路由前判断**/
//    beforeRouteEnter (to, from, next) {
//      next(vm => {
//        alert(from.query.stateId)
//        if(from.query.stateId!=undefined){
//        console.log(from.query.stateId)
//        vm.selected=from.query.stateId;
//        vm.isNeed=true;
//      }else{
//        vm.isNeed=false;
//      }
//    })
//    },
    watch:{
      'isFinish'(val){
        console.log(val)
        if(val.length>0){
          this.search.incomplete=1;
        }else{
          this.search.incomplete='';
        }

      },
      'selected'(val){
        this.page=1;
        Indicator.open({
          text: '加载中...',
          spinnerType: 'snake'
        });
        //    获取接单列表
        var params = new URLSearchParams();
        if(val=='1'){
          this.orderByField='create_date'
        }
        if(val=='2'){
          this.orderByField='receiveDate'
        }
        if(val=='3'){
          this.orderByField='lastAllotDate'
        }
        if(val=='4'){
          this.orderByField='lastuploadDate'
        }
        if(val=='5'){
          this.orderByField='cancelDate'
        }
        if(val=='6'){
          this.orderByField='finishDate'
        }
        if(val=='7'){
          this.orderByField='cancelApplyDate'
        }

        const demandData={
          businessType:1,
          applyCustomName:this.search.applyCustomName,
          carNo:this.search.carNo,
          sn:this.search.sn,
          remark:this.search.remark,
          incomplete:this.search.incomplete,
          storeAllotStatus:val,
          orderByField:this.orderByField,
        }
        params.append('demandData',JSON.stringify(demandData));
        params.append('page',this.page);
        params.append('pageSize',this.pageSize);
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceDemandApp!listDemand.do',
          data:params
        }).then((res)=>{
//        if(res.data.statusCode==200){
          Indicator.close();
        this.res = res.data;
        this.enquiryList = res.data.rows;
        console.log(res,123)
        this.total=res.data.total;
        if(this.enquiryList.length<=0){
          this.showNone=true;
        }else{
          this.showNone=false;
        }
//      }else{
//        Toast({
//          message: res.data.message,
//          position: 'middle',
//          duration:800
//        });
//        Indicator.close();
//      }
      });
      }
    },
    mounted(){
      this.selected='1'
      this.$axios({
        method: 'post',
        url:'gp/bu/login!userInfo.do',
      }).then((res)=>{
        if(res.data.statusCode==200){
//        if(res.data.object.isAdmin=='0101' || res.data.object.isShopKeeper=='0101'){
//          this.isAdmin=true;
//          this.selected='1'
//        }else{
//          this.isAdmin=false;
//          this.selected='3'
//        }
        this.selected='1'
        if(sessionStorage.getItem('goStateId')!='' && sessionStorage.getItem('goStateId')!=null){
          this.selected=sessionStorage.getItem('goStateId')
        }
        sessionStorage.setItem('goStateId',''); // 存入一个值
      }
    });

    },
    methods:{
      handleDetails(id){
        this.$router.push({path:'/app-grabsheet-details',query: {id:id,stateId:this.selected}})
      },
      /**确认抢单**/
      handleGrabsheet(id){

        MessageBox({
          title: '',
          message: '确认是否抢单?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){}
      });
      },
      loadMore() {
        if(this.total==0){
          return false;
        }
        if(this.enquiryList.length<this.total){
          this.loading = true;
          this.page++;
          var params = new URLSearchParams();

          if(this.selected=='1'){
            this.orderByField='createDate'
          }
          if(this.selected=='2'){
            this.orderByField='receiveDate'
          }
          if(this.selected=='3'){
            this.orderByField='lastAllotDate'
          }
          if(this.selected=='4'){
            this.orderByField='lastuploadDate'
          }
          if(this.selected=='5'){
            this.orderByField='cancelDate'
          }
          if(this.selected=='6'){
            this.orderByField='finishDate'
          }
          if(this.selected=='7'){
            this.orderByField='finishDate'
          }

          const demandData={
            businessType:1,
            applyCustomName:this.search.applyCustomName,
            carNo:this.search.carNo,
            sn:this.search.sn,
            remark:this.search.remark,
            incomplete:this.search.incomplete,
            storeAllotStatus:this.selected,
            orderByField:this.orderByField,
          }
          params.append('demandData',JSON.stringify(demandData));
          params.append('page',this.page);
          params.append('pageSize',this.pageSize);
          this.$axios({
            method: 'post',
            url:'gp/bu/serviceDemandApp!listDemand.do',
            data:params
          }).then((res)=> {
            for(var i=0;i<res.data.rows.length;i++){
            this.enquiryList.push(res.data.rows[i]);
          }
        });
          setTimeout(() => {
            this.loading = false;
        },1000);
        }else{
          this.loadTips=true;
        }

      },

      handleFilter(){
        this.popupFilterShow=true
      },
      getCountFlag(){
        this.page=1;
        var params = new URLSearchParams();
        const demandData={
          businessType:1,
          applyCustomName:this.search.applyCustomName,
          carNo:this.search.carNo,
          sn:this.search.sn,
          remark:this.search.remark,
          incomplete:this.search.incomplete,
        };
        params.append('demandData',JSON.stringify(demandData));
        params.append('page',this.page);
        params.append('pageSize',this.pageSize);
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceDemandApp!listDemand.do',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          this.resCount = res.data.object;
        }else{
          Toast({
            message:res.data.message,
            position: 'middle',
            duration:800
          });
        }

      }).catch((error)=>{
          console.log(error)
      });
      },
      handleSure(){
        this.getCountFlag();
        this.page=1;
        var params = new URLSearchParams();
        if(this.selected=='1'){
          this.orderByField='createDate'
        }
        if(this.selected=='2'){
          this.orderByField='receiveDate'
        }
        if(this.selected=='3'){
          this.orderByField='lastAllotDate'
        }
        if(this.selected=='4'){
          this.orderByField='lastuploadDate'
        }
        if(this.selected=='5'){
          this.orderByField='cancelDate'
        }
        if(this.selected=='6'){
          this.orderByField='finishDate'
        }
        if(this.selected=='7'){
          this.orderByField='finishDate'
        }
        const demandData={
          businessType:1,
          applyCustomName:this.search.applyCustomName,
          carNo:this.search.carNo,
          sn:this.search.sn,
          remark:this.search.remark,
          incomplete:this.search.incomplete,
          storeAllotStatus:this.selected,
          orderByField:this.orderByField,
        }
        params.append('demandData',JSON.stringify(demandData));
        params.append('page',this.page);
        params.append('pageSize',this.pageSize);
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceDemandApp!listDemand.do',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          console.log(res)
          Toast({
            message: '筛选成功',
            position: 'middle',
            duration:800
          });
          this.popupFilterShow=false;
          this.res = res.data;
          this.enquiryList = res.data.rows;
          console.log(res,123)
          this.total=res.data.total;
        }else{
          Toast({
            message:res.data.message,
            position: 'middle',
            duration:800
          });
        }

      });
      }
    }
  }
</script>

<style>

  .app-grabsheet-list .mint-tab-item-label .count{
    position: absolute;
    top: -8px;
    right:-14px;
    left:inherit;
    display: inline-block;
    width:14px;
    height: 14px;
    border-radius:50%;
    border:1px solid #c34853;
    font-size: 10px;
    letter-spacing:-1px;
    line-height: 16px;
    color:#c34853;
    display: none;
  }
  .app-grabsheet-list .mint-tab-item-label{
    position: relative;
    font-size:14px;
  }
  .app-grabsheet-list .mint-navbar{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .app-grabsheet-list .mint-navbar .mint-tab-item{
    position: relative;
    padding:18px 0 16px;
  }
  .app-grabsheet-list .mint-navbar .mint-tab-item .tab-item-content{
    position: relative;
  }
  .app-grabsheet-list .mint-navbar .mint-tab-item.is-selected{
    color:#007EE5;
    border-bottom:none;
  }
  .app-grabsheet-list .mint-navbar .mint-tab-item.is-selected{
    color:#007EE5;
    border-bottom:none;
  }
  .app-grabsheet-list .mint-navbar .mint-tab-item.is-selected:after{
    background: #007EE5;
    position: absolute;
    bottom:2px;
    left: 0;
    right: 0;
    height: 2px;
    content: '';
  }
  .app-grabsheet-list .mint-navbar .mint-tab-item.is-selected .mint-tab-item-label{
    font-size:15px;
  }
  .app-grabsheet-list .mint-tab-container{
    padding:12px 12px 0;
  }

  .app-grabsheet-list .xunjia-list{
    padding:15px;
  }

  .app-grabsheet-list .xunjia-list .item{
    background: #fff;
    padding:12px 16px 0;
    margin:0 0 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius:4px;
  }
  .app-grabsheet-list .xunjia-list .item-header{
    position: relative;
    padding:0 0 6px;
    font-size:15px;
    color: #333;
    font-weight: bold;
    border-bottom:1px solid #eee;
  }
  .app-grabsheet-list .xunjia-list .item-state{
    position: absolute;
    top: 0;
    right: 0;
  }
  .app-grabsheet-list .xunjia-list .item-body{
    margin: 0;
    padding:8px 0;
    font-size:14.6px;
    color: #888;
  }
  .app-grabsheet-list .xunjia-list .item-body dd{
    margin: 0 0 5px;
    line-height:20px;
  }
  .app-grabsheet-list .xunjia-list .item-footer{
    border-top:1px solid #ddd;
    margin:0 -16px;
    display: flex;
  }
  .app-grabsheet-list .xunjia-list .item-footer .mint-button{
    background:none;
    width:50%;
    height:46px;
    border-radius:0;
    font-size: 15px;
    border-right:1px solid #f5f5f5;
    color:#007EE5
  }
  .app-grabsheet-list .xunjia-list .item-footer .mint-button:after{
    background:none;
  }
  .app-grabsheet-list .tab-store a.mint-tab-item{
    /*width:18% !important;*/
    /*min-width:18%;*/
    /*max-width:18%;*/
    width:33.2% !important;
    min-width:33.2%;
    max-width:33.2%;
  }
  .app-grabsheet-list .item-sn{
    padding:4px 0 0;
    font-size: 13px;
    font-weight:normal;
    color: #999;
  }
  .app-grabsheet-list .icon-didian1{
    font-weight: bold;
    margin-right:4px;
  }
  .app-grabsheet-list .item-addon{
    color: #666;
  }

  .app-grabsheet-list .load-finish-tips{
    padding:4px 0 16px;
    font-size: 14px;
    color:#666;
    text-align: center;
  }
  .app-grabsheet-list .load-finish-tips:before{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-right:6px;
  }
  .app-grabsheet-list .load-finish-tips:after{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-left:6px;
  }
  .app-grabsheet-list .module-none{
    padding:50px 0 0;
    font-size: 16px;
    text-align: center;
    color:#999;
  }
  .app-grabsheet-list .module-none .icon-meiyoudingdan{
    display: block;
    margin:0 0 6px;
    font-size: 50px;
    color:#c4c4c4;
  }
  .app-grabsheet-list .app-header{
    background: #fff;
    font-size: 14.6px;
    padding:6px 10px;
    border-bottom:1px solid #ddd;
    overflow: hidden;
  }
  .app-grabsheet-list .type-content{
    color: #007EE5;
  }
  .app-grabsheet-list .type-show{
    line-height: 38px;
    font-size: 16px;
  }
  .app-grabsheet-list .btn-filter{
    float: right;
    padding:8px 16px;
    height:auto;
    font-size: 14px;
  }
  .app-grabsheet-list .filter-popup{
    height: 100%;
    width:80%;
    font-size: 14px;
  }
  /*.app-grabsheet-list .filter-item{*/
  /*border-bottom:1px solid #ddd;*/
  /*}*/
  .app-grabsheet-list .filter-list .addon{
    display: block;
    padding:12px 12px 0;
    /*border-bottom:1px solid #ddd;*/
  }
  .app-grabsheet-list .filter-list .addon:before{
    background:#007EE5;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:4px;
    height:16px;
    content: '';
    margin-right:5px;
  }

  .app-grabsheet-list .mint-radiolist .mint-cell{
    width:50%;
    display: inline-block;
    vertical-align: middle;
  }
  .app-grabsheet-list .mint-radiolist .mint-cell-wrapper{
    background:none;
  }
  .app-grabsheet-list .mint-radiolist .mint-cell:last-child{
    background:none;
  }
  .app-grabsheet-list .filter-popup .button-content{
    padding:24px 10px 0;
    text-align: center;
    font-size: 0;
  }
  .app-grabsheet-list .filter-popup .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .app-grabsheet-list .filter-popup .button-content .mint-button{
    display: inline-block !important;
    width: 100%;
    font-size: 15px;
  }

  .app-grabsheet-list .filter-item-spe .mint-cell-value{
    min-height:36px;
    padding:4px 8px;
    border:1px solid #ddd;
    border-radius:6px
  }
  .app-grabsheet-list .filter-item-spe{
    border-bottom:none
  }
  .app-grabsheet-list .filter-item-spe .mint-cell-wrapper{
    background:none;
    font-size: 14px;
  }
  .app-grabsheet-list .filter-item-spe .mint-cell:last-child{
    background:none;
  }
  .app-grabsheet-list .app-main-content{
    padding:98px 0 0;
  }
  .app-grabsheet-list .item-body-content{
    margin: 0;
  }

  .app-grabsheet-list .select-wangong .mint-cell-value{
    border:none !important;
  }
  .app-grabsheet-list .select-wangong .mint-checklist-label{
    padding: 0;
  }
</style>
